<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="shop-bg">
			<u--image :src="info.imgList[0] | setImgUrl" width="750rpx" height="455rpx" mode="aspectFill">
				<view slot="error" style="font-size: 24rpx;background: #ddd;width: 750rpx;height: 455rpx;"></view>
			</u--image>
		</view>
		<!-- 头部状态栏 -->
		<view class="statusBar" :style="{'height':`${statusBarH}px`}"></view>
		<!-- 标题 -->
		<view class="header">
			<u-icon name="arrow-left" color="#FFFEFE" size="28" @click="back()"></u-icon>
			<view class="title">
				{{info.shop_name || ''}}
			</view>
		</view>
		<!-- 内容 -->
		<view class="shop-info">
			<!-- 店铺名称 -->
			<view class="shop-name">
				<view class="shop-img">
					<u--image :src="info.logo | setImgUrl" width="165rpx" height="165rpx" mode="aspectFill">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">
							{{info.shop_name || ''}}
						</view>
						<view class="star" v-if="info.is_collection" @click="star(0)">
							<u-icon name="star-fill"></u-icon>
							<text style="margin-left: 6rpx;">已收藏</text>
						</view>
						<view class="star" v-else @click="star(1)">
							<u-icon name="star"></u-icon>
							<text style="margin-left: 6rpx;">收藏</text>
						</view>
					</view>
					<view class="tip">
						{{info.description || ''}}
					</view>
				</view>
			</view>
			<!-- 图集 -->
			<view class="img-group">
				<u-scroll-list :indicator="false">
					<view class="img-item" v-for="(item,index) in info.imgList" :key="index">
						<view class="num" v-if="index == 0">
							{{info.imgList.length || 0}}张
						</view>
						<view class="img-box">
							<u--image :src="item | setImgUrl" width="236rpx" height="172rpx" mode="aspectFill">
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 营业时间 -->
			<view class="time-box" @click="navigation()">
				<image src="../../static/shop-b.png" style="width: 35rpx;height: 33rpx;margin-right: 12rpx;" mode="">
				</image>
				<view class="center">
					<view class="time">
						{{info.business|| ''}}
					</view>
					<view class="tabs">
						<view class="tab" v-for="(item,index) in info.labelList" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<image src="../../static/right.png" style="width: 16rpx;height: 26rpx;margin-left: 20rpx;" mode="">
				</image>
			</view>
			<!-- 地址 -->
			<view class="address-box">
				<image src="../../static/address.png" style="width: 25rpx;height: 31rpx;margin-right: 18rpx;" mode="">
				</image>
				<view class="address">
					{{info.shop_address || ''}}
				</view>
				<image src="../../static/car.png" style="width: 33rpx;height: 27rpx;margin-left: 30rpx;" mode=""
					@click="navigation()">
				</image>
				<image src="../../static/call-r.png" style="width: 28rpx;height: 30rpx;margin-left: 30rpx;" mode=""
					@click="call()">
				</image>
			</view>
			<!-- 商品 -->
			<view class="goods-info" v-if="info.goods_arr">
				<view class="title">
					{{info.goods_arr.name || ''}}
				</view>
				<view class="img-goods">
					<u--image :src="info.goods_arr.image | setImgUrl" width="710rpx" height="270rpx" mode="aspectFill">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
				<view class="footer">
					<view class="price-box">
						<view class="price">
							￥ {{info.goods_arr.price || 0}}
						</view>
						<view class="original">
							￥{{info.goods_arr.market_price || 0}}
						</view>
					</view>
					<view class="views">
						<image src="../../static/eye.png" style="width: 28rpx;height: 21rpx;margin-right: 8rpx;"
							mode=""></image>
						<text>{{info.goods_arr.view || 0}}</text>
					</view>
				</view>
			</view>
			<!-- 活动详情 -->
			<view class="activity">
				<view class="title">
					活动详情
				</view>
				<view class="goods-box">
					<view class="goods-name">
						<mp-html :content="info.goods_arr.activitydetails_content"></mp-html>
					</view>
					<!-- <view class="price">
						<text style="font-size: 22rpx;">￥</text>{{info.goods_arr.price}}
					</view> -->
				</view>
				<!-- <view class="tip">
					<view>
						温馨提示：
					</view>
					<view class="content" v-html="info.goods_arr.buy_content">
					</view>
				</view> -->
			</view>
			<!-- 购买须知 -->
			<view class="explain">
				<view class="title">
					购买须知
				</view>
				<!-- 有效期 -->
				<view class="explain-content">
					<mp-html :content="info.goods_arr.buy_content"></mp-html>
				</view>
				<!-- <view class="item" v-html="info.goods_arr.buy_content">
					<view class="title">
						<image src="../../static/calendar.png" style="width: 27rpx;height: 27rpx;margin-right: 16rpx;"
							mode=""></image>
						<view>有效期</view>
					</view>
					<view class="text-content">
						2021.10.18至2022.5.16 23：59（周末、法定节假日通用）
					</view>
				</view> -->
				<!-- 使用时间 -->
				<!-- <view class="item">
					<view class="title">
						<image src="../../static/time.png" style="width: 27rpx;height: 27rpx;margin-right: 16rpx;"
							mode=""></image>
						<view>使用时间</view>
					</view>
					<view class="text-content">
						12：00-次日01：30
					</view>
				</view> -->
				<!-- 规则 -->
				<!-- <view class="item">
					<view class="title">
						<image src="../../static/rule.png" style="width: 25rpx;height: 27rpx;margin-right: 16rpx;"
							mode=""></image>
						<view>使用规则</view>
					</view>
					<view class="text-content">
						优惠券请提前购买，入场前请先到前台验证后入场消费，不接受入场后使用优惠券。
						每张优惠券限1人使用，超出收费标准；按当时店内实际价格收取费用。
					</view>
				</view> -->
			</view>
			<view class="explain">
				<view class="title">
					评价
					<text style="font-size: 10px; font-weight: 400;">（{{evaluate.total}}）</text>
					<text style="float: right; margin-right: 20rpx;font-size: 13px; font-weight: 400;">好评度
						{{evaluateNum}}%</text>
				</view>
				<evaluate-list :dataList='evaluate.data.slice(0,2)'></evaluate-list>
				<view class="see-all" v-if="evaluate.data.length>2" @click="toEvaluateList">
					查看全部评价
				</view>

			</view>
			<!-- 说明 -->
			<view class="goods-tip">
				以上活动由河南公众法律服务有限公司见证，活动真实有效
			</view>
			<!-- 操作 -->
			<!-- <view class="btn-group">
				<view class="cancel" @click="toIndex()">
					<image src="../../static/back-w.png" style="width: 39rpx;height: 39rpx;margin-right: 21rpx;"
						mode=""></image>
					<text>返回首页</text>
				</view>
				<view class="buy" @click="submitOrder">
					立即抢购
				</view>
			</view> -->
			<view class="mian-button">
				<view class="index" @click="toIndex()">
					<u-icon name="home" size="30"></u-icon>
					首页
				</view>
				<view class="index">
					<button class="u-reset-button" open-type="contact">
						<u-icon name="server-man" size="30"></u-icon>
						客服
					</button>
				</view>
				<view class="buy" @click="submitOrder">
					立即抢购({{info.goods_arr.price}}元)
				</view>
			</view>
		</view>
		<!-- 个人中心 -->
		<image src="../../static/user-f.png" class="user-btn" mode="" @click="toCenter"></image>
	</view>
</template>

<script>
	import evaluateList from '@/components/evaluateList.vue'
	export default {
		components: {
			evaluateList
		},
		data() {
			return {
				statusBarH: uni.getSystemInfoSync().statusBarHeight,
				shop_id: '',
				info: {},
				page: 1,
				evaluate: {},
				evaluateNum: 0
			}
		},
		onLoad(options) {
			console.log(uni)
			if (options.scene) {
				this.shop_id = options.scene;
			} else {
				this.shop_id = options.id
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 好评度
			getGoodRate() {
				uni.$u.http.post('/shop/commentinfo', {
					goods_id: this.info.goods_arr.id,
				}).then(res => {
					this.evaluateNum = res.data.praise_rate
				})
			},
			// 获取评论
			getEvaluateList() {
				uni.$u.http.post('/shop/commentlist', {
					goods_id: this.info.goods_arr.id,
					page: this.page
				}).then(res => {
					this.evaluate = res.data
				})
			},
			// 去评论列表
			toEvaluateList() {
				uni.$u.route('/pages/evaluate_list/evaluate_list', {
					id: this.info.goods_arr.id
				})
			},
			// 跳转个人中心
			toCenter() {
				uni.reLaunch({
					url: '/pages/center/center'
				})
			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.info.phone
				})
			},
			// 导航
			navigation() {
				console.log("navigation", this.info);
				var location = this.bMapToQQMap(this.info.lng, this.info.lat)
				console.log("location", location);
				uni.openLocation({
					latitude: Number(location[1]),
					longitude: Number(location[0]),
					name: this.info.shop_name
				})
			},
			// navigation() {
			// 	uni.openLocation({
			// 		latitude: Number(this.info.lat),
			// 		longitude: Number(this.info.lng),
			// 		name: this.info.shop_name
			// 	})
			// },
			/**
			 * 坐标转换，百度地图坐标转换成腾讯地图坐标
			 * lng 腾讯经度（pointy）
			 * lat 腾讯纬度（pointx）
			 * 经度>纬度
			 */
			bMapToQQMap(lng, lat) {
				if (lng == null || lng == '' || lat == null || lat == '')
					return [lng, lat];

				var x_pi = 3.14159265358979324;
				var x = parseFloat(lng) - 0.0065;
				var y = parseFloat(lat) - 0.006;
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				var lng = (z * Math.cos(theta)).toFixed(7);
				var lat = (z * Math.sin(theta)).toFixed(7);

				return [lng, lat];
			},
			// 购买
			submitOrder() {
				uni.setStorageSync('orderInfo', this.info.goods_arr)
				uni.navigateTo({
					url: '/pages/order/submit'
				})
			},
			// 收藏
			star(type) {
				if (type == 1) {
					uni.$u.http.post('/shop/collection', {
						shop_id: this.shop_id
					}).then(res => {
						this.$u.toast('已收藏')
						this.getInfo()
					})
				} else {
					uni.$u.http.post('/shop/nocollection', {
						shop_id: this.shop_id
					}).then(res => {
						this.$u.toast('已取消')
						this.getInfo()
					})
				}
			},
			// 获取详情
			getInfo() {
				uni.$u.http.post('/shop/shopdetails', {
					shop_id: this.shop_id
				}).then(res => {
					this.info = res.data
					this.info.labelList = this.info.label.split(',')
					this.info.imgList = this.info.shop_images.split(',')
					this.getGoodRate()
					this.getEvaluateList()
				})
			},
			toIndex() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mian-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		border-top: 1rpx solid #ccc;
		background-color: #FFF;
		display: flex;
		justify-content: space-around;
		font-size: 26rpx;
		padding: 0 100rpx;
		padding-top: 20rpx;

		.index {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 60rpx;

			image {
				height: 50rpx;
				width: 50rpx;
			}
		}

		.buy {
			width: 420rpx;
			height: 100rpx;
			border-radius: 70rpx;
			font-size: 30rpx;
			background-color: #f23f3a;
			color: #FFF;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.content {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.shop-bg {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.statusBar {
		width: 750rpx;
	}

	.header {
		display: flex;
		align-items: center;
		margin-top: 34rpx;
		width: 720rpx;
		z-index: 2;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 19rpx;
			color: #FFFEFE;
		}
	}

	.shop-info {
		z-index: 3;
		background: #FFFFFF;
		width: 750rpx;
		min-height: 400rpx;
		margin-top: 273rpx;
		box-shadow: 0rpx 2rpx 13rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 14rpx 14rpx 0px 0rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 160rpx;

		.shop-name {
			width: 710rpx;
			display: flex;
			align-items: flex-end;
			padding: 0rpx 24rpx;
			justify-content: space-between;

			// position: relative;
			.shop-img {
				position: relative;
				margin-top: -30rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.right {
				width: 525rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						width: 390rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.star {
						font-size: 28rpx;
						color: #333;
						display: flex;
						align-items: center;
					}
				}

				.tip {
					font-size: 20rpx;
					color: #808080;
					margin-top: 18rpx;
				}
			}
		}
	}

	.img-group {
		width: 750rpx;
		margin-top: 18rpx;

	}

	.img-item {
		margin-left: 20rpx;
		position: relative;

		.num {
			font-size: 26rpx;
			color: #FFFFFF;
			background: rgba(0, 0, 0, 0.4);
			padding: 4px 6px;
			text-align: center;
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			z-index: 3;
		}

		.img-box {
			overflow: hidden;
			width: 236rpx;
			height: 172rpx;
			border-radius: 6rpx;
		}
	}

	.time-box {
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #E6E6E6;
		width: 710rpx;
		margin-top: 14rpx;
		display: flex;
		align-items: center;

		.center {
			width: 610rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;

			.tabs {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 6rpx;

				.tab {
					border: 1rpx solid #E6E6E6;
					padding: 2rpx 6rpx;
					font-size: 20rpx;
					font-weight: 400;
					margin-right: 8rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}

	.address-box {
		height: 101rpx;
		width: 710rpx;
		border-bottom: 1rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;

		.address {
			width: 540rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.goods-info {
		margin-top: 29rpx;
		padding-bottom: 15rpx;
		width: 710rpx;
		border-bottom: 1rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			width: 710rpx;
		}

		.img-goods {
			margin-top: 28rpx;
		}

		.footer {
			margin-top: 14rpx;
			width: 634rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-box {
				display: flex;
				align-items: flex-end;

				.price {
					font-size: 40rpx;
					font-weight: bold;
					color: #FF2307;
					line-height: 46rpx;
				}

				.original {
					font-size: 24rpx;
					font-weight: 400;
					color: #3E3836;
					text-decoration: line-through;
					margin-left: 12rpx;
				}
			}

			.views {
				font-size: 21rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
			}

		}
	}

	.activity {
		margin-top: 23rpx;
		padding-bottom: 41rpx;
		border-bottom: 1rpx solid #E6E6E6;
		width: 710rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #080808;
		}

		.goods-box {
			margin-top: 27rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods-name {
				width: 710rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #191919;
			}

			.price {
				font-size: 32rpx;
				font-weight: bold;
				color: #303030;
			}
		}

		.tip {
			margin-top: 39rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #191919;
			display: flex;

			.content {
				width: 610rpx;
				display: block;
			}
		}
	}

	.explain {
		margin-top: 32rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		width: 710rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #080808;
		}

		.see-all {
			margin: 20rpx auto;
			height: 80rpx;
			width: 80%;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 1rpx solid #E6E6E6;
		}

		.item {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 32rpx;

			.title {
				display: flex;
				align-items: center;
				width: 710rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
			}

			.text-content {
				width: 530rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #191919;
				margin-top: 20rpx;
			}
		}
	}

	.goods-tip {
		margin-top: 35rpx;
		font-size: 18rpx;
		font-weight: 500;
		color: #333333;
	}

	.btn-group {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 750rpx;
		height: 143rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;

		.cancel {
			width: 346rpx;
			height: 84rpx;
			background: #333;
			border-radius: 37rpx 0rpx 0rpx 37rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.buy {
			width: 346rpx;
			height: 84rpx;
			background: linear-gradient(90deg, #F23A3A, #F75F30);
			border-radius: 0rpx 37rpx 37rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.explain-content {
		width: 710rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 32rpx;
		margin-left: 20rpx;
	}

	.user-btn {
		position: fixed;
		right: 0rpx;
		bottom: 300rpx;
		width: 89rpx;
		height: 98rpx;
		z-index: 99;
	}
</style>
